<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM的查询操作</title>
    <script>
        function f1(){
            // 查找id属性值为btn1的元素
            // 由于id属性不能重复,因此其返回的元素有且仅有一个
            let btn = document.getElementById("btn1");
            console.log(btn);
            // 在js中,提供了获取标签体的内容的方法
            let d1 = document.getElementById("d1");
            // innerHTML用于获取标签体内容
            // innerText也是用于获取标签体内容
            // 两者区别
                // innerHTML识别标签
                    // 取值时,可以获取到标签
                    // 赋值时,可以显示出标签效果
                // innerText不识别标签
                    // 取值时,无法获取标签,只能获取到文本内容
                    // 赋值时,无法显示标签效果,只能将标签作为普通字符串展现
            console.log("innerHTML取值:"+d1.innerHTML);
            console.log("innerText取值:"+d1.innerText);
            // d1.innerHTML = "<h1>这是新的内容</h1>";
            d1.innerText = "<h1>这是新的内容</h1>";
        }
        function f2(){
            // 根据name属性查询指定的节点信息
            // 由于name属性的值是可以重复的
            // 因此其返回值是一个节点集合,可以不止一个
            let btns = document.getElementsByName("btn");
            console.log(btns);
        }
        function f3(){
            // 根据标签名查询指定的节点信息
            // 由于标签名是可以使用无数次的
            // 因此其返回值是一个节点集合,可以不止一个
            let btns = document.getElementsByTagName("button");
            console.log(btns);
        }
        function f4(){
            // 根据选择器进行查询
            // 该方式有两种方法
            // 1.document.querySelector("")
                // 该方法表示找到符合选择器规则的第一个元素
                // 只返回一个元素,如果存在多个,返回第一个
            // 2.document.querySelectorAll("")
                // 该方法表示找到符合选择器规则的所有元素
                // 返回的是一个元素集合
            // let ele = document.querySelector("button");
            // let eles = document.querySelectorAll("button");
            let ele = document.querySelector(".c1");
            let eles = document.querySelectorAll(".c1");
            console.log(ele)
            console.log(eles);
        }
    </script>
</head>
<body>
<button class="c1" id="btn1" name="btn" onclick="f1()">根据id属性查询对应的节点信息</button><br/>
<button name="btn" onclick="f2()">根据name属性查询对应的节点信息</button><br/>
<button class="c1" onclick="f3()">根据name属性查询对应的节点信息</button><br/>
<button onclick="f4()">根据选择器查询对应的节点信息</button><br/>
<div class="c1" name="btn" id="d1">
    <h1>这是div中的标题</h1>
</div>
</body>
</html>